import { Transfer,Button,Table,Input} from "antd";
import { url } from "inspector";

import { useEffect, useState } from "react";
import { getProduct } from "../api/purchase";
const columns:any = [
  {
    title: '商品图片',
    dataIndex: 'gallery',
    render:(text:any)=>{
      var urls ;
      if(text.includes("|")){
        urls=text.split("|")
      }else{
        urls=text.split(",")
      }
      return <img src={urls[0]} width="60"/>
    }
     
  },
  {
    title: '商品名称',
    dataIndex: 'productName',
  
  },
  {
    title: '商品编码',
    dataIndex: 'id',
  },
  {
    title: '商品价格',
    dataIndex: 'price',
  },
  {
    title: '商品规格',
    dataIndex: 'specs',
  },
];
function SelectProduct(props:any) {
  const [ dataSource,setDataSource] = useState<any>([])
  const [ targetSource,setTargetSource] = useState<any>([])
  const [selectOriginRow,setSelectOriginRow] = useState<any>([])
  const [selectTargetRow,setSelectTargetRow] = useState<any>([])

  const [pagination,setPagination]=useState({
    pageSize:5,
    total:1,
    current:1
  })
  function getSource(){
    
    getProduct(params)
    .then(res=>{
      setDataSource(res.data.data)
      const pa = res.data.pagnation;
      setPagination({...pagination,total:pa.total})
    })
  }
  const [params,setParams] = useState({productName:'',current:1,order:'asc',size:5})
  useEffect(()=>{
    getSource()
  },[params.current])
  useEffect(()=>{
    setTargetSource([...props.selectProList])
  },[])
  
  // useEffect(()=>{
  //   if(props.groupInfo.products){
  //     getShop({id:props.groupInfo.products})
  //     .then(res=>{
  //       setTargetSource(res.data.data)       
  //     })
  //   }
  // },[props.groupInfo.products])
  const selectChange = (selectedRowKeys: React.Key[], selectedRows:any[])=>{
    console.log(selectedRowKeys,selectedRows)
    setSelectOriginRow(selectedRows)
  }
  const selectTargetChange = (selectedRowKeys: React.Key[], selectedRows:any[])=>{
    
    setSelectTargetRow(selectedRows)
  }
  const addTarget = ()=>{
      const rows = selectOriginRow.concat(targetSource);
      setTargetSource(rows);
      const originRow =dataSource.filter((element:any)=>{
        return !selectOriginRow.some((item:any)=>item.id==element.id)
      })
      setDataSource(originRow)
  }
  const addOrigin = ()=>{
    const rows = selectTargetRow.concat(dataSource);
    setDataSource(rows);
    const targetRow =targetSource.filter((element:any)=>{
      return !selectTargetRow.some((item:any)=>item.id==element.id)
    })
    setTargetSource(targetRow)
}
const sureSelect = ()=>{
    props.setSelectProList(targetSource);
    props.setShowProduct(false)
  // const productsId = targetSource.map((item:any)=>item.id).join(',');
  // props.setGroupInfo({...props.groupInfo,products:productsId})
  // props.setShowShop(false);
}
 
  return ( <div className="SelectShop">
     <div className="content">
      <div className="left">
        <h3>选择商品</h3>
      <div className="half">
        <span >
        商品名称：<Input 
        value={params.productName} onChange={e=>setParams({...params,productName:e.target.value})}/>
        </span>        
        <span>
          <Button onClick={getSource}>搜索</Button>
        </span>
       

      </div>
        <Table 
           rowKey="id"
            size="small"
           rowSelection={{
            type:'checkbox',
            onChange:selectChange
          }}
          columns={columns}
          dataSource={dataSource}
          pagination={{...pagination,current:params.current}}
          onChange={(pa)=>{
            setParams({...params,current:Number(pa.current)})
          }}
        ></Table>
      </div>
      <div className="btns" >
        <div><Button onClick={addTarget}>添加&gt;&gt;</Button></div>
        <div><Button onClick={addOrigin}>&lt;&lt;取消</Button></div>
      </div>
      <div className="right">
      <h3>已选店铺</h3>
      <Table
       style={{marginBottom:32,minHeight:320}} 
       rowKey="id"
            size="small"
           rowSelection={{
            type:'checkbox',
            onChange:selectTargetChange
          }}
          columns={columns}
          dataSource={targetSource}  
          pagination={false}       
        ></Table>
        
      </div>
     </div>
     <p style={{textAlign:'center'}}>
        <Button  onClick={()=>props.setShowProduct(false)}>取消</Button>
        <Button type="primary" onClick={sureSelect}>保存</Button>
      </p>
    
  </div> );
}

export default SelectProduct